<template>
  <p>
    <button @click="refresh" class="btn btn-white btn-default btn-round">
      <i class="ace-icon fa fa-refresh"></i>
      刷新
    </button>
  </p>
  <div class="row">
    <div class="col-md-6">
      <textarea id="resource-textarea" class="form-control" v-model="resourceStr" name="resource" rows="10"></textarea>
      <br>
      <button id="save-btn" type="button" class="btn btn-primary" v-on:click="saveResource()">
        保存
      </button>
    </div>
  </div>
  <br>
  <div class="row">
    <!--资源表格-->
    <div class="col-md-8">
      <table id="simple-table" class="table  table-bordered table-hover">
        <thead>
        <tr>
          <th>id</th>
          <th>名称</th>
          <th>页面</th>
          <th>请求</th>
          <th>父id</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="resource in resources" :key="resource.id">
          <td>{{ resource.id }}</td>
          <td>{{ resource.name }}</td>
          <td>{{ resource.page }}</td>
          <td>{{ resource.request }}</td>
          <td>{{ resource.parent }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  <!--资源树-->
    <div class="col-md-4">
      <ul id="tree" class="ztree"></ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {onMounted, ref} from "vue";

export default {
  name: "Resource",
  components: {},
  setup() {
    const resources = ref([]); // resources 数组

    const resourceStr = ref(""); // 资源配置（权限配置）Json字符串
    const tree = ref(); // 资源树

    /**
     * 刷新
     */
    const refresh = () => {
      getResourceList();
    }

    /**
     * 获取资源列表
     */
    const getResourceList = () => {
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/system/admin/resource/list").then((response) => {
        Loading.hide();
        const resp = response.data;
        resources.value = resp.content;
        initZTree(); // 加载资源树
      })
    }

    /**
     * 保存资源
     */
    const saveResource = () => {
      // 非空校验
      if (Tool.isEmpty(resourceStr.value)) {
        Toast.warning("资源配置不能为空");
        return;
      }
      let jsonStr = JSON.parse(resourceStr.value); // 要转为对象 要不然后端乱码
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/system/admin/resource/save", jsonStr).then((response) => {
        const resp = response.data;
        if (resp.success) {
          Loading.hide();
          Toast.success("保存成功");
          getResourceList();
        } else {
          Loading.hide();
          Toast.warning(resp.message);
        }
      })
    }

    /**
     * 初始化树
     */
    const initZTree = () => {
      var setting = {
        data: {
          simpleData: {
            idKey: "id",
            pIdKey: "parent",
            rootPId: '',
            enable: true
          }
        }
      };

      var zNodes = resources.value;

      tree.value = $.fn.zTree.init($("#tree"), setting, zNodes);
      tree.value.expandAll(true);// 展开树
    }

    /**
     * 初始加载第一页
     */
    onMounted(() => {
      getResourceList();
    })

    return {
      resources,
      refresh,
      getResourceList,
      saveResource,
      resourceStr,
    }
  }
}
</script>

<style scoped>

</style>